<template>
  <!-- 楼层分区 -->
  <div class="right-box-top">
    <group-card title="楼层分区">
      <div class="floorZoning">
        <div class="floor-search" :class="`${roomValue ? '' : 'empty'}`">
          <input
            ref="myRoomRef"
            v-model="roomValue"
            type="text"
            placeholder="请输入楼层分区号"
            class="floor-search-input"
            @keyup="handleSearch"
          />
          <img
            v-if="roomValue"
            class="floor-cancel"
            @click="handleClear"
            src="@/assets/images/cancel.png"
          />
          <img
            v-else
            class="floor-img"
            @click="handleFocus"
            src="@/assets/images/search.png"
          />
        </div>
        <div class="floor-info">
          <!-- <div class="info" >执行机构办公室</div> -->
          <!-- <div class="info floor-info-active">信息技术办公室</div> -->
          <!-- <div class="info">多功能会议室</div>
          <div class="info">外宾VIP室</div>
          <div class="info">贵宾室</div>
          <div class="info">内宾VIP室</div> -->
          <div
            class="info"
            v-for="item in RoomList"
            :key="item"
            v-html="item"
            @click="handleCheckRoom(item)"
          ></div>
        </div>
      </div>
    </group-card>
  </div>
</template>

<script setup>
import { toUeMsg } from "@/utils/onClientNotify";
import { RoomListConf } from "@/utils/roomList"; //所有房间数据

const roomValue = ref("");
const myRoomRef = ref(null);
const RoomList = ref([...RoomListConf]);

const handleClear = () => {
  roomValue.value = "";
  RoomList.value = [];
};

const handleFocus = () => myRoomRef.value && myRoomRef.value.focus();

const handleSearch = () => {
  const list = RoomListConf.filter((item) => item.includes(roomValue.value));
  RoomList.value = list;
};

const handleCheckRoom = (room) => {
  console.log(room, "handleCheckRoom");
  toUeMsg("changeCurrentRoom", {
    CurrentRoom: room,
  });
};
</script>

<style lang="scss" scoped>
.right-box-top {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 372px;
  // background-color: #9f6666;
  position: relative;
  .floorZoning {
    margin: 25px 0 0 21px;
    font-size: 14px;
    .floor-search {
      position: relative;
      width: 260px;
      height: 32px;
      border-radius: 16px;
      // box-shadow: inset 0px 0px 2px 0px #FFFFFF;
      background-color: #000;
      line-height: 32px;
      opacity: 1;
      transition: all 0.2s;
      &.empty {
        // opacity: .7;
      }
      .floor-search-input {
        display: inline-block;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: inherit;
        padding-left: inherit;
        line-height: inherit;
        background-color: transparent;
        border: none;
        padding: 2px 38px 2px 14px;
        box-sizing: border-box;
        color: #ffffff;
        font-size: 14px;
        &:focus {
          outline: none;
        }
      }
      .floor-cancel,
      .floor-img {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translate(0, -50%) scale(1);

        width: 14px;
        height: 14px;
      }
      .floor-cancel {
        cursor: pointer;
        &:active {
          transition: all 0.1s ease;
          transform: translate(0, -50%) scale(1.05);
        }
      }
    }
    .floor-info {
      max-height: 360px;
      padding-left: 30px;
      color: rgba(255, 255, 255, 0.9);
      overflow-y: auto;
      .info {
        font-size: 14px;
        margin-top: 16px;
        cursor: pointer;
        user-select: none;
      }
      .floor-info-active {
        position: relative;
        color: #ffffff;

        &::before {
          content: "";
          display: block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #ffffff;
          position: absolute;
          top: 50%;
          left: -14px;
          transform: translate(0, -50%);
        }
      }
    }
  }
  &::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    top: 8px;
    left: 30px;
  }
}
</style>
